import React from 'react';
import {Card, Row, Col, Typography} from 'antd';
import {RiseOutlined, FallOutlined} from '@ant-design/icons';
import styled from 'styled-components';

const {Text, Title} = Typography;

const StyledCard = styled(Card)`
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  }

  .ant-card-body {
    padding: 20px;
  }
`;

interface StatCardProps {
  title: string;
  value: string;
  icon: React.ReactNode;
  color: string;
  trend?: string;
  trendUp: boolean;
}

const StatCard: React.FC<StatCardProps> = ({title, value, icon, color, trend, trendUp}) => {
  return (
    <StyledCard>
      <Row align="middle">
        <Col>
          <div className="stat-icon" style={{
            width: 40,
            height: 40,
            borderRadius: 10,
            background: `${color}15`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            marginRight: 12,
            fontSize: 20,
            color: color
          }}>
            {icon}
          </div>
        </Col>
        <Col style={{flex: 1}}>
          <Text type="secondary">{title}</Text>
          <div style={{display: 'flex', alignItems: 'baseline'}}>
            <Title level={4} style={{margin: '4px 0 0 0'}}>{value}</Title>
            {
              trend && (
                <div style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 4,
                  fontSize: 13,
                  padding: '2px 8px',
                  borderRadius: 10,
                  marginLeft: 8,
                  background: trendUp ? 'rgba(82, 196, 26, 0.1)' : 'rgba(255, 77, 79, 0.1)',
                  color: trendUp ? '#52c41a' : '#ff4d4f'
                }}>
                  {trendUp ? <RiseOutlined/> : <FallOutlined/>}
                  {trend}
                </div>
              )
            }
          </div>
        </Col>
      </Row>
    </StyledCard>
  );
};

export default StatCard;
